<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一层  添加按钮以及全局搜索框 -->
    <Row :class="'m-0'">
      <Col span="9">
        <div class="search">
          <Input
            search
            placeholder="按照名字模糊检索"
            v-model="searchIndistinctName"
            :class="'w-90 m-2'"
          />
        </div>
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75 search-btn"
          type="primary"
          shape="circle"
          @click="searchResourceList"
          icon="ios-search"
          >查询</Button
        >
      </Col>
      <div style="margin:5px"></div>
      <!-- excel批量导出组件 -->
      <Col span="4">
        <Button class="m-2 w-50" type="success" @click="excelOut">导出</Button>
      </Col>
    </Row>
    <div :style="isShow ? alllist : apart">
      <!-- 第二行 -->
      <Row :class="'m-0'">
        <Col span="4">
          <Input :class="'w-75 m-2'" v-model="searchName" placeholder="姓名" />
        </Col>
        <Col span="4">
          <Input :class="'w-75 m-2'" v-model="searchTel" placeholder="电话" />
        </Col>
        <Col span="3">
          <Date-picker
            :class="' w-100 m-2'"
            type="datetime"
            v-model="searchReservationInterviewStartTime"
            placeholder="预约到访开始时间"
          ></Date-picker>
        </Col>
        <div class="to">~</div>
        <Col span="3">
          <Date-picker
            format="yyyy-MM-dd HH:mm:ss"
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchReservationInterviewEndTime"
            placeholder="预约到访结束时间"
          >
          </Date-picker>
        </Col>
      </Row>
      <!-- 第三行 -->
      <Row :class="'m-0'">
        <Col span="4">
          <i-col :class="'w-75 m-2'">
            <Select
              v-model="searchStatu"
              filterable
              clearable
              placeholder="线索状态"
            >
              <Option
                v-for="item in sourceList"
                :value="item.value"
                :disabled="item.isDisabled"
                >{{ item.label }}
              </Option>
            </Select>
          </i-col>
        </Col>
        <Col span="4">
          <i-col :class="'w-75 m-2'">
            <Select
              placeholder="请选择跟进人"
              v-model="searchAutor"
              filterable
              clearable
              :disabled="isSelectAutor"
            >
              <Option v-for="item in autorList" :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </i-col>
        </Col>
        <Col span="3">
          <Date-picker
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchReservationBackviewStartTime"
            placeholder="预约回访开始时间"
          >
          </Date-picker>
        </Col>
        <div class="to">~</div>
        <Col span="3">
          <Date-picker
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchReservationBackviewEndTime"
            placeholder="预约回访结束时间"
          >
          </Date-picker>
        </Col>
      </Row>
      <!-- 第四行 -->
      <Row :class="'m-0'">
        <Col span="4">
          <Input
            :class="'w-75 m-2'"
            v-model="searchYpzw"
            placeholder="应聘职位"
          />
        </Col>
        <Col span="4">
          <i-col :class="'w-75 m-2'">
            <Select
              placeholder="请选择添加人"
              v-model="searchCu"
              filterable
              clearable
              :disabled="isSelectAutor"
            >
              <Option v-for="item in autorList" :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </i-col>
        </Col>
        <Col span="4">
          <i-col :class="'w-75 m-2'">
            <Select
              v-model="searchSource"
              placeholder="线索来源"
              filterable
              clearable
            >
              <Option v-for="item in orsourceList" :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </i-col>
        </Col>
      </Row>
    </div>
    <!-- 展开/收起 -->
    <div class="hidden">
      <span v-if="isShow" @click="showAll"
        >展开 <Icon type="ios-arrow-down"
      /></span>
      <span v-if="!isShow" @click="showPart"
        >收起 <Icon type="ios-arrow-up"
      /></span>
    </div>

    <Layout :class="'bg-white'">
      <Table
        disabled-hover
        border
        :class="'m-1'"
        :columns="tableInfo.columnInfo"
        :data="tableInfo.data"
        :row-class-name="rowClassName"
      >
        <!-- 名字超链接 -->
        <template slot-scope="{ row, index }" slot="name">
          <Row>
            <Col>
              <a @click="showPersonDetail(row)">{{ row.name }}</a>
            </Col>
          </Row>
        </template>
        <!-- 下拉菜单 -->
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem
                ><Button type="primary" @click="show(row)"
                  >详细</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button type="primary" @click="updateResourceAutor(row)"
                  >分配</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button
                  :disabled="row.autorId == null"
                  type="primary"
                  @click="newInterview(row)"
                  >转到访</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button
                  :disabled="row.autorId == null"
                  type="primary"
                  @click="newbaoming(row)"
                  >转报名</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button
                  :disabled="row.autorId == null"
                  type="primary"
                  @click="newReservationInterview(row)"
                  >预约到访时间</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button
                  :disabled="row.autorId == null"
                  type="primary"
                  @click="newReservationBackview(row)"
                  >预约回访时间</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button
                  :disabled="row.autorId == null"
                  type="primary"
                  @click="newBackview(row)"
                  >新增回访</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button type="error" @click="abandon(row)"
                  >放弃</Button
                ></DropdownItem
              >
              <DropdownItem
                ><Button type="error" @click="searchResourceInfo(row)"
                  >删除</Button
                ></DropdownItem
              >
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <!-- </div> -->

      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="tableInfo.size"
        @on-change="pageSearch"
        :total="tableInfo.total"
        :current="tableInfo.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
  </Layout>
</template>
<script>
import store from '../../common/store.js'
export default {
  data() {
    let self = this
    return {
      disabledFlg: true,
      visible: false,
      alllist: 'height: 50px;transition:all linear .1s',
      apart: 'height: 100px;transition:all linear .1s',
      isShow: true,
      shouldLight: 'background-color: orangered;',
      notLight: 'background-color: blue;',
      searchIndistinctName: '',
      searchName: '',
      searchTel: '',
      searchStatu: '',
      searchSource: '',
      searchYpzw: '',
      searchCu: '',
      searchAutor: '',
      searchReservationInterviewStartTime: '',
      searchReservationInterviewEndTime: '',
      searchReservationBackviewStartTime: '',
      searchReservationBackviewEndTime: '',
      tableInfo: {
        page: 1, //当前页
        size: 10, //每页条数
        total: 0, //总条数
        pageSize: 0, //总页数
        columnInfo: [
          {
            title: '#',
            width: 80,
            fixed: 'left',
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index +
                  (self.tableInfo.page - 1) * self.tableInfo.size +
                  1
              )
            },
          },
          {
            title: '学生姓名',
            slot: 'name',
            width: 100,
            fixed: 'left',
          },
          {
            title: '联系电话',
            key: 'tel',
            width: 150,
            fixed: 'left',
          },
          {
            title: '备注',
            key: 'bz',
            width: 200,
          },
          {
            title: '线索状态',
            key: 'statu',
            width: 150,
          },
          {
            title: '预约到访时间',
            key: 'reservationInterviewTime',
            width: 200,
          },
          {
            title: '预约回访时间',
            key: 'reservationBackviewTime',
            width: 200,
          },
          {
            title: '线索来源',
            key: 'source',
            width: 150,
          },
          {
            title: '应聘职位',
            key: 'ypzw',
            width: 100,
          },
          {
            title: '跟进人',
            key: 'autor',
            width: 150,
          },
          {
            title: '添加人',
            key: 'cu',
            width: 150,
          },
          {
            title: '添加时间',
            key: 'createTime',
            width: 200,
          },
          {
            title: '操作',
            slot: 'action',
            width: 100,
            fixed: 'right',
          },
        ],
        data: [],
      },
      sourceList: [],
      //分配对象对话框默认关闭
      updateAutor: false,
      //分配对象对话框中选择器内容
      autorList: [],
      autorUserId: '',
      resourceRecordId: '',
      selectAutor: '',
      modal2: false,
      nowDate: '',
      currentTime: new Date(),
      isSelectAutor: true,
      orsourceList: [
        { value: '58同城', label: '58同城' },
        { value: '智联招聘', label: '智联招聘' },
        { value: '前程无忧', label: '前程无忧' },
        { value: 'boss直聘', label: 'boss直聘' },
        { value: '拉勾网', label: '拉勾网' },
        { value: '51job', label: '51job' },
        { value: '其他', label: '其他' },
      ],
    }
  },
  methods: {
    showPersonDetail: function(row) {
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    testAutorNull: function(row) {
      row
    },
    newReservationInterview(row) {
      this.$router.push({
        name: 'reservationInterview_new', //跳转至XX新增页面
        params: {
          row,
          stageId: 1, //wuweinan -> luoxin
        },
      })
    },
    newReservationBackview(row) {
      this.$router.push({
        name: 'reservationBackview_new', //跳转至XX新增页面
        params: {
          row,
          stageId: 1, // 线索阶段的阶段id为1
        },
      })
    },
    newBackview(row) {
      this.$router.push({
        name: 'backview_new', //跳转至XX新增页面
        params: {
          row,
          stageId: 1,
        },
      })
    },
    showAll: function() {
      this.isShow = !this.isShow
    },
    showPart: function() {
      this.isShow = !this.isShow
    },
    init: function() {
      this.$data.tableInfo.page = 1
      this.searchResourceList()
      this.getTime()
    },
    getTime() {
      const date = new Date()

      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.nowDate = year + '-' + month + '-' + day
    },
    rowClassName(row, index, nowDate) {
      if (row.reservationBackviewTime == null) {
        return
      }
      let str = row.reservationBackviewTime
      str = str.substring(0, 10)
      if (this.nowDate == str) {
        return 'demo-table-row'
      } else if (this.nowDate != str) {
        return ''
      }
    },
    newUser: function() {
      this.$router.push({
        name: 'resource_new',
      })
    },
    show: function(row) {
      this.$router.push({
        name: 'resource_detail',
        params: {
          row,
        },
      })
      this.visible = false
      this.modal2 = false
    },
    update(userId) {
      this.$router.push({
        name: 'resource_update',
        params: {
          userId,
        },
      })
    },
    searchResourceInfo: function(row) {
      this.http
        .get({
          url: `/resource/info/${row.resourceId}`,
        })
        .then((data) => {
          this.remove(data)
        })
      this.modal2 = false
      this.visible = false
    },
    remove: function(data) {
      let param = {
        'resource.id': data.resource.id,

        'student.id': data.student.id,

        'resourceRecord.id': data.resourceRecord.id,

        'reservationBackview.id': data.reservationBackview.id,

        'reservationInterview.id': data.reservationInterview.id,
      }
      this.message.confirm({
        title: '删除提示',
        content: '即将删除【' + data.student.name + '】的线索，确定吗？',

        onOk: () => {
          this.http
            .delete({
              url: '/resource',
              param: param,
            })
            .then((data) => {
              this.searchResourceList()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },

    //查询线索列表
    searchResourceList: function() {
      let param = {
        page: this.$data.tableInfo.page,
        size: this.$data.tableInfo.size,
        reservationInterviewStartTime: this.$data
          .searchReservationInterviewStartTime,
        reservationInterviewEndTime: this.$data
          .searchReservationInterviewEndTime,
        reservationBackviewStartTime: this.$data
          .searchReservationBackviewStartTime,
        reservationBackviewEndTime: this.$data.searchReservationBackviewEndTime,
        indistinctName: this.$data.searchIndistinctName,
        'student.name': this.$data.searchName,
        'student.tel': this.$data.searchTel,
        'resource.source': this.$data.searchSource,
        'resource.ypzw': this.$data.searchYpzw,
        'resource.cu': this.$data.searchCu,
        'resource.autor': this.$data.searchAutor,
        'resource.statu': this.$data.searchStatu,
      }
      this.http
        .get({
          url: '/resource/list',
          param: param,
        })
        .then((data) => {
          this.$data.tableInfo.page = data.pageInfo.page
          this.$data.tableInfo.size = data.pageInfo.size
          this.$data.tableInfo.total = data.pageInfo.total
          this.$data.tableInfo.totalPage = data.pageInfo.totalPage
          this.$data.tableInfo.data = parseDataObj(data)
        })
    },
    pageSearch: function(changedPage) {
      this.$data.tableInfo.page = changedPage
      this.searchResourceList()
    },
    changeSize: function(changeSize) {
      this.$data.tableInfo.size = changeSize
      this.searchResourceList()
    },
    //分配线索
    updateResourceAutor: function(row) {
      this.http
        .get({
          url: `/resource/info/${row.resourceId}`,
        })
        .then((data) => {
          this.resourceRecordId = data.resourceRecord.id
        })

      this.modal2 = false

      this.$Modal.confirm({
        title: '分配线索',

        render: (h, params) => {
          return h(
            'Select',
            {
              props: {
                value: row.autor, // 获取选择的下拉框的值
                size: 'small',
              },
              on: {
                'on-change': (val) => {
                  this.autorUserId = val
                },
              },
            },
            this.autorList.map(function(item) {
              return h('Option', {
                props: {
                  value: item.value,
                  label: item.label,
                },
              })
            })
          )
        },

        onOk: () => {
          this.http
            .put({
              url: '/resource/autor',
              param: {
                'resourceRecord.id': this.resourceRecordId,
                'resource.id': row.resourceId,
                'user.userId': this.autorUserId,
              },
            })
            .then((data) => {
              this.searchResourceList()
              this.message.info('分配成功')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    //excel导出
    excelOut: function() {
      this.message.confirm({
        title: '导出提示',
        content:
          '即将导出【' + this.$data.tableInfo.total + '】条线索，确定导出吗？',
        onOk: () => {
          window.location.href = this.$store.state.iport + 'resource/excel/out'
          this.message.info('导出成功')
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    //放弃线索
    abandon: function(row) {
      let param = {
        'resource.id': row.resourceId,
      }
      this.message.confirm({
        title: '放弃提示',
        content: '即将放弃【' + row.name + '】的线索，确定吗？',

        onOk: () => {
          this.http
            .put({
              url: '/resource/abandon',
              param: param,
            })
            .then((data) => {
              this.searchResourceList()
              this.message.info('线索已放弃')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    newInterview: function(row) {
      this.$router.push({
        name: 'interview_new',
        params: {
          row,
        },
      })
    },
    newbaoming: function(row) {
      this.$router.push({
        name: 'baoming_new',
        params: {
          row,
        },
      })
    },
    search: function(data) {},
  },

  // importFile() {},
  isLight: function(n) {},
  created: function() {
    //从session中取出用户列表
    let userList = JSON.parse(localStorage.getItem('USER_LIST'))
    userList.forEach((user) => {
      let u = {
        value: user.userId,
        label: user.nickName,
      }
      this.autorList.push(u)
      console.log(userList)
    })
    console.log(userList)
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    currentUser.permissions.forEach((twopermission) => {
      twopermission.permissions.forEach((per) => {
        if (per.name == '可分配') {
          this.isSelectAutor = false
        }
      })
    })

    this.sourceList = [
      {
        value: '未分配',
        label: '未分配',
        isDisabled: this.isSelectAutor,
      },
      {
        value: '待回访(线索)',
        label: '待回访(线索)',
        isDisabled: false,
      },
      {
        value: '未到访',
        label: '未到访',
        isDisabled: false,
      },
    ]
    this.init()
    this.getTime()
  },
  mounted() {},
}

/*
            	此函数主要解析返回的data，将复杂的级联对象封装为tableinfo所对应的字段的对象
            */
function parseDataObj(data) {
  //从session中取出用户的集合
  let userList = JSON.parse(localStorage.getItem('USER_LIST'))
  //定义一个跟进人名字变量
  let autorName = ''
  //定义一个添加人名字变量
  let cuName = ''
  var resourcesArray = []

  data.list.forEach((list) => {
    if (list.reservationInterview == undefined) {
      var judegReservationInterviewTime = null
    } else {
      judegReservationInterviewTime = list.reservationInterview.datetime
    }
    if (list.reservationBackview == undefined) {
      var judegReservationBackviewTime = null
    } else {
      judegReservationBackviewTime = list.reservationBackview.datetime
    }
    let autorName = null
    userList.forEach((user) => {
      if (user.userId == list.resource.autor) {
        autorName = user.nickName
      }
      if (user.userId == list.resource.cu) {
        cuName = user.nickName
      }
    })
    let poko = {
      resourceId: list.resource.id,
      name: list.student.name,
      tel: list.student.tel,
      ypzw: list.resource.ypzw,
      source: list.resource.source,
      statu: list.resource.statu,
      bz: list.resource.bz,
      autor: autorName,
      cu: cuName,
      createTime: list.resource.ct,
      studentId: list.student.id,
      // resourceRecordId: list.resourceRecord.id,
      autorId: list.resource.autor,
      reservationBackviewId: list.reservationBackview.id,
      reservationInterviewId: list.reservationInterview.id,
      reservationInterviewTime: judegReservationInterviewTime,
      reservationBackviewTime: judegReservationBackviewTime,
    }
    resourcesArray.push(poko)
  })
  return resourcesArray
}
</script>
<style scoped>
.to {
  padding: 10px 10px 0px 30px;
}

.search {
  margin-right: 5px;
}
.hidden {
  position: relative;
  top: 25px;
  cursor: pointer;
  color: gray;
  font-size: 12px;
  padding: 0px 0px 30px 1050px;
}

.bottom {
  text-align: center;
  z-index: 0;
}

.ivu-select-dropdown button {
  display: block;
  margin: 5px 10px;
  width: 120px;
}
.ivu-select-dropdown .ivu-dropdown-item {
  padding: 0;
}
.ivu-table .demo-table-row2 td {
  background-color: white;
}
</style>

<style>
.ivu-select-dropdown {
  max-height: 325px;
}
.ivu-table .demo-table-row td {
  background-color: #f1939c;
  color: #ffffff;
}
</style>
